import React,{Component} from 'react'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
//import Switch, {Case,Default} from 'react-switch-case';
import $ from 'jquery'

class CourseManages extends Component {
	constructor(args) {
		super()
		this.state = {
			radioList:[],
			checkList:[],
			course: {},
			visible:false,
			jobTree:[],
			result:false,
			singleList:[],
			multipleList: [],
			titleList:{},
			categoriesList:[],
			courseattach:[]

		}
	
			
	}
	componentWillMount() {
		fetch.clickCheck(this.props.params.id).then((data) => {
			let single = [],
				multiple = [];
			for (let x of data.titleList) {
				if (x.titleType === '1') {
					single.push(x);
				} else {
					multiple.push(x);
				}
			}
			this.setState({
				course: data.coursedata,
				jobTree:data.jobTree,
				titleList: data.titleList,
				singleList: single,
				multipleList: multiple,
				categoriesList:data.categoriesList.categoriesList,
				courseattach:data.courseattach
			},()=>{
				let course = this.state.course;
				let jobTree = [];
				if (course.jobLevel === '' || course.jobLevel === null) {
				} else {
					jobTree = course.jobLevel.split(',')
				}
				
				let flag = course.elecReqCourse === '0';
				if (this.state.course.checkState === '2') {
					$('input[type="radio"][name="result"]')[1].checked = true;
				} else {
					$('input[type="radio"][name="result"]')[0].checked = true;
					this.setState({ result: true }, () => {
						$('input[type="radio"][name="elecReqCourse"]')[flag ? 0 : 1].checked = true;
					});
				}
				if (!flag) {
					this.setState({
						visible: true
					}, () => {
						for (let i in jobTree) {
							$('.check-box').find(`input[type='checkbox'][name=jobLevel${jobTree[i]}]`)[0].checked = true;
						}

					})
				}
				this.disable();
				})
		}, (res) => {
			pub.reject(res);
		})
	}
	disable() {
		$('.topic').find('input').each(function(index, el) {
			$(el).attr("disabled", "disabled");
		});
	}

	render() {
		let course = this.state.course;
		return (
			<div className="wrapper bg-F0F4F6">
			<div className="layout pad-t-20">
				<div className="video-container bg-FFFFFF box-shadow clearFix">
					<div className="video-box">
						<video src={course.coursevideoPath}
						 controls="controls"  width="550" height="315" 
						  preload="auto">
							您的浏览器不支持 video 标签。
						</video>
					</div>
					<div className="v-info">
						<div className="v-cont">
						    <h3>&lceil;<span>{course.userRealName}</span>&rfloor;<span>{course.courseName}</span></h3>
					         <div>{pub.formatTimestamp(course.createTime)}</div>
							 <h3><span>课程介绍</span></h3>
							<p className='shorthand'>{course.courseDesc}</p>
						</div>
						<div className="enclosure">
						<h3>课程附件</h3>
						<ul>
						    {this.state.courseattach.map((attach,index)=>{
						    	return(
						    		   <a key={index} download={attach.courseattachUniquene} href={pub.getFile(attach.courseattachUniquene)}>{attach.courseAttrachPath}</a>
						    		)
						    })}
						</ul>
					</div>
					</div>
				</div>

			<div className="row bg-FFFFFF box-shadow mar-t-20 pad-l-20 pad-r-20">

					<h3 style={{borderBootm:'1px solid #dee6f4',padding:'10px'}} className="mar-b-20">课程范围</h3>
					<div className="range">
						<label>课程渠道：
							{/*	<Switch condition={course.courseChannel}>
							    {pub.courseChannel.map((type,index)=>{
							    	return(
							    		<Case key={index} value={(index).toString()}><span>{type}</span></Case>
							    		)
							    })}
							    <Default><span>未知</span></Default>
						</Switch>*/}
						{
							pub.courseChannel.map((type,index)=>{
								return(
									<div key={index}>{course.courseChannel === (index).toString()?<span>{type}</span>:null}</div>
								)
							})
						}
						</label>
						<label>课程分类：
                        
                                {this.state.categoriesList.map((type,index)=>{
							    	return(
							    		<div key={index}>{course.courseType === type.code?<span>{type.name}</span>:null}</div>
							    	)
							    })}
                        

						</label>
					</div>

					<h3 style={{borderBottom:'1px solid #DEE6F4',padding:'10px'}} className="mar-b-20">课程考题</h3>
					<div className="topic radio-topic mar-b-20">
					    <h3>单项选择题：</h3>
					    {this.state.singleList.map((item,index)=>{
					    	return(
					  	       <dl key={index}>
					  	       	<dt>{index + 1}、{item.title}</dt>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>A.{item.A}</label></dd>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>B.{item.B}</label></dd>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>C.{item.C}</label></dd>
					  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>D.{item.D}</label></dd>
					  	       </dl>
					    		)
					    })}
					</div>
					<div className="topic MultipleQuestion check-topic">
					    <h3>多选选择题：</h3>
					    {this.state.multipleList.map((item,index)=>{
					  	return(
						       <dl key={index}>
						       	<dt>{index + 1}、{item.title}</dt>
						       	<dd><label><input type="checkbox" disabled="disabled"/>A.{item.A}</label></dd>
						       	<dd><label><input type="checkbox" disabled="disabled"/>B.{item.B}</label></dd>
						       	<dd><label><input type="checkbox" disabled="disabled"/>C.{item.C}</label></dd>
						       	<dd><label><input type="checkbox" disabled="disabled"/>D.{item.D}</label></dd>
						       </dl>
					  		)
					  })}
					</div>
					{
							this.state.course.checkState !== '3' && this.state.course.checkState!=='4'?
								<div className="topic mar-b-20">
									<dl>
										<dt>审核结果</dt>
										<dd>

											<label><input type="radio" disabled="disabled" required="required" name="result" value="1" />通过</label>
											<label><input type="radio" disabled="disabled" required="required" name="result" value="2" />不通过</label>

											{this.state.result ? <label>学习积分：<input type="number" disabled="disabled" defaultValue={course.studyIntegral} required="required" ref='studyIntegral' /></label> : null}
										</dd>
									</dl>

									{this.state.result ?
										<dl>
											<dt>课程级别</dt>
											<dd>
												<label><input disabled="disabled" type="radio" required="required" name="elecReqCourse" value="0" />选修</label>
												<label><input disabled="disabled" type="radio" required="required" name="elecReqCourse" value="1" />必修</label>
											</dd>
										</dl>
										: null}

									{this.state.visible && this.state.result ?
										<div className="pop-box-1" style={{ paddingBottom: '0px' }}>
											<div className="check-box" style={{ height: 'auto' }}>
												{this.state.jobTree.map((job, index) => {
													return (
														<label key={index} id="job_Tree"><input type="checkbox" disabled="disabled" name={'jobLevel' + job.jobCode} value={job.jobCode} />{job.jobName}</label>
													)
												})}
											</div>
										</div>
										:
										null
									}

									<dl>
										<dt>审核意见</dt>
										<dd><textarea disabled="disabled" required="required" value={course.checkReason} ref="checkReason" onKeyUp={this.numberInputs}>
										</textarea></dd>
									</dl>

								</div>:null
					}


			</div>
	</div>
	</div>

		)
	}

}
export default CourseManages

